<template>
    <div class="form-wrapper">
        <div class="card">
            <el-tag size="mini" class="dark-tag" :color="this.edgeColor">
                关系
            </el-tag>
            <span>{{edgeData.label}}</span>
            <div class="relation-block">
                <el-tag size="mini" class="dark-tag" :color="this.edgeColor">
                    {{edgeData.source.label}}
                </el-tag>
                <i class="el-icon-arrow-right"></i>
                <el-tag size="mini" class="dark-tag" :color="this.edgeColor">
                    {{edgeData.target.label}}
                </el-tag>
            </div>
        </div>
        <el-divider class="divider-style"><i class="el-icon-edit"></i></el-divider>
        <el-collapse class="form" accordion>
            <el-collapse-item title="编辑关系">
                <el-form>
                    <el-form-item>
                        <el-input class="input-with-button" placeholder="修改关系名称" v-model="edgeName">
                        </el-input>
                        <el-button class="button-in-input" @click="modifyEdgeName">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-select class="input-with-button" placeholder="修改线条样式" v-model="edgeStyle">
                            <el-option v-for="item in edgeStyleList"
                                       :key="item.key"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button class="button-in-input" type="primary" @click="modifyEdgeStyle">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="删除关系">
                <el-button class="form-item-style" type="danger" @click="deleteEdge">
                    删除关系<i class="el-icon-delete"></i>
                </el-button>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import d3ClassGetter from "../../assets/javascript/d3ClassGetter";

    export default {
        name: "edgeForm",
        data() {
            return {
                edgeName: "",
                edgeColor: "#409EFF",
                sourceNodeName: "node1",
                targetNodeName: "node2",
                edgeStyle: "",
                edgeStyleList: d3ClassGetter.edgeStyleList
            };
        },
        props: {
            edgeData: {
                type: Object,
                default: null
            },
            edgeMethods: {
                type: Object,
                default: null
            }
        },
        methods: {
            modifyEdgeName() {
                this.edgeMethods.modifyEdgeName(this.edgeName);
                this.edgeName = "";
            },
            modifyEdgeStyle() {
                this.edgeMethods.modifyEdgeType(this.edgeStyle);
            },
            deleteEdge() {
                this.edgeMethods.deleteEdge();
            }
        }
    };
</script>

<style scoped>
    @import "../../assets/styles/formStyle.css";
</style>